<template>
  <div class="category">
    <Breadcrumb></Breadcrumb>
    <div class="wrapper">
      <div class="title">产品类目管理</div>
      <div class="tree">
        <!-- 一级按钮 -->
        <el-button
          type="warning"
          style="margin-bottom: 20px"
          @click="insertFirstCategory"
          >新增一级导航类目</el-button
        >
        <!-- tree内容结构 -->
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent"
        >
        </el-tree>
      </div>
      <Dialog
        ref="dialog"
        :info="info"
        :type="type"
        @updateViews="treeData"
      ></Dialog>
    </div>
  </div>
</template>

<script>
import { cayteGory, deleteContentCategoryById } from "@/http/category";
import Dialog from "./dialog.vue";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      info: "",
      type: 1, //1 新增 2 修改 3 一级分类
      data: [
        {
          id: 1,
          name: "一级 1",
          children: [
            {
              id: 4,
              name: "二级 1-1",
            },
          ],
        },
        {
          id: 2,
          name: "一级 2",
          children: [
            {
              id: 5,
              name: "二级 2-1",
            },
            {
              id: 6,
              name: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          name: "一级 3",
          children: [
            {
              id: 7,
              name: "二级 3-1",
            },
            {
              id: 8,
              name: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        label: "name",
      },

      // return {
      //   data: JSON.parse(JSON.stringify(data)),
      //   // data: JSON.parse(JSON.stringify(data))
      // };
    };
  },

  methods: {
    append(data) {
      this.$refs.dialog.dialogVisible = true;

      // this.title = `新增【${data.name}】子集分类`;
      this.info = {
        title: `新增【${data.name}】子集分类`,
        cid: data.cid,
      };
      this.type = 1;
      this.$refs.dialog.input = "";
    },
    insertFirstCategory() {
      this.$refs.dialog.dialogVisible = true;
      this.type = 3;
      this.info = {
        title: `新增一级分类`,
      };
      this.$refs.dialog.input = "";
    },

    remove(node, data) {
      deleteContentCategoryById({ id: data.id })
        .then((res) => {
          if (res.data.status == 200) {
            this.$message({
              message: "恭喜你，删除成功",
              type: "success",
            });
            //隐藏弹框
            this.dialogVisible = false;
            this.treeData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    update(node, data) {
      this.$refs.dialog.dialogVisible = true;
      this.info = {
        title: `新增【${data.name}】子集分类`,
        id: data.id,
      };
      this.type = 2;
      this.$refs.dialog.input = data.name;
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span class="name">{node.label}</span>
          {node.level == 1 ? (
            <span>
              <el-button
                class="mini"
                on-click={() => this.append(data)}
                icon="el-icon-plus"
              >
                新增
              </el-button>
              <el-button
                class="mini"
                on-click={() => this.update(node, data)}
                icon="el-icon-edit"
              >
                修改
              </el-button>
              <el-button
                class="mini"
                type="danger"
                on-click={() => this.remove(node, data)}
                icon="el-icon-delete"
              >
                删除
              </el-button>
            </span>
          ) : (
            <span>
              <el-button
                class="mini"
                on-click={() => this.update(node, data)}
                icon="el-icon-edit"
              >
                修改
              </el-button>
              <el-button
                class="mini"
                type="danger"
                on-click={() => this.remove(node, data)}
                icon="el-icon-delete"
              >
                删除
              </el-button>
            </span>
          )}
        </span>
      );
    },
    treeData() {
      cayteGory()
        .then((res) => {
          if (res.data.status == 200) {
            // this.data = res.data.result.map((item) => {
            //   if (item.type == 1) {
            //     return item;
            //   }
            // });
            // this.data = [];
            let oneArr = [];
            let otherData = [];
            res.data.result.forEach((item) => {
              if (item.type == 1) {
                item.children = [];
                oneArr.push(item);
              } else {
                otherData.push(item);
              }
            });
            console.log("tree数据---", oneArr);
            oneArr.forEach((item) => {
              otherData.forEach((item1) => {
                if (item.cid == item1.type) {
                  item.children.push(item1);
                }
              });
            });

            this.data = oneArr;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    this.treeData();
  },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.category {
  margin: 10px;
}

.wrapper {
  padding: 10px;
  margin-top: 10px;
  background: #fff;

  .title {
    background: #f6f6f6;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    padding-left: 10px;
  }

  .tree {
    margin: 10px;

    ::v-deep .mini {
      padding: 4px 10px;
      font-size: 14px;
    }

    ::v-deep .el-tree-node__content {
      margin-bottom: 10px;
    }
  }

  ::v-deep .name {
    width: 300px;
    display: inline-block;
  }
}
</style>